<!--
 * @Author: zwz
 * @Date: 2023-09-08 23:08:36
 * @LastEditors: zwz
 * @LastEditTime: 2023-09-09 12:21:25
 * @Description: 请填写简介
-->
<template>
  <!-- <div class="app-container">
    <div class="container">
      <div class="container-left">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>当天消费数据</span>
          </div>
          <div class="consumption">
            <div class="consumption-item">
              <img
                class="consumption-item-img"
                src="@/assets/images/frontPage/NumberConsumers.jpg"
                alt=""
              />
              <div>
                <div class="consumption-item-title">消费总人数</div>
                <div class="consumption-item-number">{{totalPeople}}</div>
              </div>
            </div>
            <div class="consumption-item">
              <img
                class="consumption-item-img"
                src="@/assets/images/frontPage/zongjine.jpg"
                alt=""
              />
              <div>
                <div class="consumption-item-title">消费总金额</div>
                <div class="consumption-item-number">{{totalAmount}}</div>
              </div>
            </div>
            <div class="consumption-item">
              <img
                class="consumption-item-img"
                src="@/assets/images/frontPage/jingdan.jpg"
                alt=""
              />
              <div>
                <div class="consumption-item-title">订单总数</div>
                <div class="consumption-item-number">{{totalOrder}}</div>
              </div>
            </div>
            <div class="consumption-item">
              <img
                class="consumption-item-img"
                src="@/assets/images/frontPage/quxiao.jpg"
                alt=""
              />
              <div>
                <div class="consumption-item-title">取消订单</div>
                <div class="consumption-item-number">{{totalCancel}}</div>
              </div>
            </div>
          </div>
        </el-card>
        <div class="container-left-middle">
          <div style="width: 49.5%">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>样品预警信息</span>
              </div>
              <el-table stripe border :data="tableDataMenu" style="width: 100%">
                <el-table-column prop="date" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="name" label="样品名称">
                </el-table-column>
                <el-table-column prop="address" label="样品预警信息">
                </el-table-column>
              </el-table>
            </el-card>
          </div>
          <div style="width: 49.5%">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>消费趋势图</span>
              </div>
              <div class="echart" id="mychart" :style="myChartStyle"></div>
            </el-card>
          </div>
        </div>
        <el-card class="box-card container-left-buttom">
          <div slot="header" class="clearfix">
            <span>最新订单记录</span>
          </div>
          <el-table stripe border :data="todayOrders" style="width: 100%">
            <el-table-column prop="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="createTime" label="下单时间"> </el-table-column>
            <el-table-column prop="type" label="订单类型"> </el-table-column>
            <el-table-column prop="peopleCount" label="就餐人数"> </el-table-column>
            <el-table-column prop="amount" label="消费金额(元)">
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <div class="container-right">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>当天自助餐菜单</span>
            <div class="container-right-card-header">
              <div
                @click="handlerMenu(true)"
                :style="{
                  color: chooseFlag ? '#fff' : '#000',
                  backgroundColor: chooseFlag ? '#1E90FF' : '#fff',
                }"
                class="container-right-card-header-left"
              >
                早餐
              </div>
              <div
                @click="handlerMenu(false)"
                :style="{
                  color: !chooseFlag ? '#fff' : '#000',
                  backgroundColor: !chooseFlag ? '#1E90FF' : '#fff',
                }"
                class="container-right-card-header-right"
              >
                中餐
              </div>
            </div>
          </div>
          <el-table border :data="tableDataMenu" style="width: 100%">
            <el-table-column prop="goods" label="菜品" >
              <template slot-scope="scope">

                <div class="container-right-card-text">
                  <span>{{ scope.row.goodsName }}</span>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="taste" label="口味"> </el-table-column>
          </el-table>
        </el-card>
        <el-card>
          <div slot="header" class="clearfix">
            <span>最新实时库存</span>
          </div>
          <el-table border :data="tableDataAll" style="width: 100%">
            <el-table-column type="index" label="序号" >
            </el-table-column>
            <el-table-column prop="name" label="配菜名称" >
                                                                        </el-table-column>
                                                                        <el-table-column prop="amountUnit" label="库存数量"> </el-table-column>
                                                                      </el-table>
                                                                    </el-card>
                                                                  </div>
                                                                </div>
                                                              </div> -->

  <div>
    <div class="main">
      <el-card class="main_left">
        <div class="main_right_search">
          <div>耗能对标分析</div>
          <div>
            <el-select v-model="data1_a" @change="getdata1()" placeholder="请选择耗能" style="width: 140px;margin-right: 10px">
              <el-option label="水耗能" value="水耗能" />
              <el-option label="电耗能" value="电耗能" />
              <el-option label="气耗能" value="气耗能" />
              <el-option label="热耗能" value="热耗能" />
            </el-select>
            <el-date-picker @change="data1BChange()" @clear="data1BChange()" v-model="data1_b" placeholder="请选择月份"
                            type="month" align="right"  format="yyyy年MM月" value-format="yyyy-MM" style="width: 140px" :clearable="false">
            </el-date-picker>
          </div>
        </div>
        <div id="echarts1"></div>
      </el-card>
      <el-card class="main_right">
        <div class="main_right_search">
          <div>区域耗能统计</div>
          <div style="display: flex;flex-flow: row;justify-content: flex-end;align-items: center;">
            <div>
              <el-select v-model="data2_a" @change="getdata2" clearable placeholder="请选择园区" style="width: 140px">
                <el-option label="二区" value="二区">
                </el-option>
                <el-option label="一区" value="一区">
                </el-option>
              </el-select>
            </div>
            <div style="margin: 0 10px">
              <el-select v-model="data2_b" @change="getdata2" clearable placeholder="请选择区域" style="width: 140px">
                <el-option v-for="item in dict.type.monitor_location" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div>
              <el-date-picker @change="getdata2()" style="width: 140px;" :clearable="false" v-model="data2_c" type="year" align="right" format="yyyy年" value-format="yyyy" >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div id="echarts2"></div>
      </el-card>
    </div>

    <div class="mains">
      <el-card style="width: 98%;margin: 0 auto;">

        <div class="main_right_searchA">
          <div>耗能综合统计</div>
          <div>
            <el-date-picker @change="getdata3()" style="width: 140px;" :clearable="false" v-model="data5_a" type="year" align="right" format="yyyy年" value-format="yyyy">
            </el-date-picker>
          </div>
        </div>
        <div id="echarts5"></div>
      </el-card>

    </div>


  </div>
</template>

<script>
import { dataCompare, dataArea, dataLine, dataGarbage } from '../../api/home'
import { listTodayEvening, listTodayMorning, listTodayOrder, resourceAll, latestResource, balanceToday } from '../../api/shop/goods'
import * as echarts from 'echarts';
import moment from "moment";
import dict from "@/utils/dict";
export default {
  dicts:['monitor_location'],
  data() {
    return {
      xData: [
        0, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31
      ], //横坐标
      yData: [23, 24, 18, 25, 23, 27, 28, 25, 24, 18, 25, 27, 28, 25, 27, 28, 25], //数据
      myChartStyle: { float: "left", width: "100%", height: "300px" },
      activeColor: "#fff",
      activebackgroundColor: "blue",
      chooseFlag: true,
      tableDataMenu: [],
      todayOrders: [],
      tableDataAll: [],
      totalAmount: 0,
      totalCancel: 0,
      totalOrder: 0,
      totalPeople: 0,
      baseUrl: process.env.VUE_APP_BASE_API,


      //
      data1_a: '水耗能',
      data1_b: '',
      data1_startTime:'',
      data1_endTime:'',
      data2_a: '一区',
      data2_b: '全园区',
      data2_c: '',
      data2_d: "",
      data5_a: '',
      data3_a: "",
      data4_a: '',
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      data5: [],

      startTime1: '',
      endTime1: "",
      startTime2: '',
      endTime2: "",

      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear(), 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 6);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

    };
  },
  created() {
    // this.getlistTodayMorning()
    // this.getlistTodayEvening()
    // this.getbalanceToday()
    // this.getresourceAll()
    // this.getTodayOrders()
    this.data5_a=moment().format('YYYY')
    this.data2_c=moment().format('YYYY')
    this.data1_b=moment().format("YYYY-MM")
    this.data1BChange()
  },
  mounted() {
    // this.getdata1()
    this.getdata2()
    this.getdata3()
    this.getdata4()
    this.getdata5()


    // this.initEcharts();
    // this.getEcharts2()
    // this.getEcharts3()
    // this.getEcharts4()
    // this.getEcharts5()



  },
  methods: {
    dict,

    getdata1() {
      dataCompare({
        type: this.data1_a,
        startTime:this.data1_startTime,
        endTime: this.data1_endTime,
      }).then((res) => {
        this.data1 = res.data
        this.getEcharts1()
      })
    },
    getdata2() {
      dataArea({
        area: this.data2_a,
        location: this.data2_b,
        // startTime: this.data2_c,
        endTime: this.data2_c,
      }).then((res) => {
        this.data2 = res.data
        this.getEcharts2()
      })
    },
    getdata3() {
      dataLine({
        startTime: this.data5_a,
        // endTime: this.data5_a,
      }).then((res) => {
        this.data3 = res.data
        this.getEcharts5()
      })
    },
    getdata4() {
      dataGarbage({
        type: "二区",
        startTime: this.startTime3,
        endTime: this.endTime3,
      }).then((res) => {
        this.data4 = res.data
        this.getEcharts3()
      })
    },
    getdata5() {
      dataGarbage({
        type: "一区",
        startTime: this.startTime4,
        endTime: this.endTime4,
      }).then((res) => {
        this.data5 = res.data
        this.getEcharts4()

      })
    },
    data1BChange(){
      if(this.data1_b){
        this.data1_startTime =moment(this.data1_b).startOf("month").format("YYYY-MM-DD HH:mm:ss");
        this.data1_endTime = moment(this.data1_b).endOf("month").format("YYYY-MM-DD HH:mm:ss");
      }else {
        this.data1_startTime = ''
        this.data1_endTime = ''
      }
      this.getdata1()
    },
    // 时间控制
    onChange() {
      // this.startTime1 = this.data2_c[0]
      // this.endTime1 = this.data2_c[1]
      this.getdata2()
    },
    onChange5() {
      this.startTime2 = this.data5_a[0]
      this.endTime2 = this.data5_a[1]
      this.getdata3()
    },
    onChange3() {
      this.startTime3 = this.data3_a[0]
      this.endTime3 = this.data3_a[1]
      this.getdata4()
    },
    onChange4() {
      this.startTime4 = this.data4_a[0]
      this.endTime4 = this.data4_a[1]
      this.getdata5()
    },
    getEcharts1() {
      let sexChart = echarts.init(document.getElementById('echarts1'));
      let sexOption = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          show:false,
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            // magicType: { show: true, type: ['line', 'bar', 'stack','pie'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,

            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.data1,

          }
        ]
      };
      sexChart.setOption(sexOption);

    },
    getEcharts2() {
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ];
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {}
        }
      };
      let sexChart = echarts.init(document.getElementById('echarts2'));
      let sexOption = {

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: '5%',
          left: 'center',
          data: this.data2.timeSeries
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: this.data2.timeSeries
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '水',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.data2.data[0]
          },
          {
            name: '电',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.data2.data[1]
          },
          {
            name: '气',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.data2.data[2]
          },
          {
            name: '热',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.data2.data[3]
          }
        ]
      }
      sexChart.setOption(sexOption);

    },
    getEcharts3() {
      let sexChart = echarts.init(document.getElementById('echarts3'));
      let sexOption = {

        legend: {
          data: this.data4.keySeries,
          orient: 'horizontal', // 设置图例水平布局
          x: 'center', // 水平居中
          y: 'bottom' // 垂直靠底部
        },
        xAxis: {
          type: 'category',
          data: this.data4.timeSeries
        },
        yAxis: {
          type: 'value'
        },
        label: {
          show: true,
          formatter: '{b}: {c}'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        series: [
          {
            data: this.data4.data[0],
            type: 'line',
            name: '回收垃圾'
          },
          {
            data: this.data4.data[1],
            type: 'line',
            name: '其他垃圾'

          },
          {
            data: this.data4.data[2],
            type: 'line',
            name: '厨余垃圾'

          },
          {
            data: this.data4.data[3],
            type: 'line',
            name: '有害垃圾'
          }
        ]
      };
      sexChart.setOption(sexOption);

    },
    getEcharts4() {
      let sexChart = echarts.init(document.getElementById('echarts4'));
      let sexOption = {

        legend: {
          data: this.data5.keySeries,
          orient: 'horizontal', // 设置图例水平布局
          x: 'center', // 水平居中
          y: 'bottom' // 垂直靠底部
        },
        xAxis: {
          type: 'category',
          data: this.data5.timeSeries
        },
        yAxis: {
          type: 'value'
        },
        label: {
          show: true,
          formatter: '{b}: {c}'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        series: [
          {
            data: this.data5.data[0],
            type: 'line',
            name: '回收垃圾'
          },
          {
            data: this.data5.data[1],
            type: 'line',
            name: '其他垃圾'

          },
          {
            data: this.data5.data[2],
            type: 'line',
            name: '厨余垃圾'

          },
          {
            data: this.data5.data[3],
            type: 'line',
            name: '有害垃圾'
          }
        ]
      };
      sexChart.setOption(sexOption);

    },
    getEcharts5() {
      const seriesData=[]
      const colorList=['green',"blue","yellow","red"]
      this.data3.keySeries.map((item,index)=>{
        const seriesItem={
          name: item,
          type: "line", //形状为柱状图
          itemStyle: {
            color: colorList[index],
          },
          data: this.data3.data[index],
        }
        seriesData.push(seriesItem)
      })
      let sexChart = echarts.init(document.getElementById('echarts5'));
      let sexOption = {
        legend: {
          data: this.data3.keySeries,
          orient: 'horizontal', // 设置图例水平布局
          x: 'center', // 水平居中
          y: 'bottom' // 垂直靠底部
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack',]},
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          type: 'category',
          data: this.data3.timeSeries
        },
        yAxis: {
          type: 'value'
        },
        label: {
          show: true,
          formatter: '{b}: {c}'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        series: seriesData
      };
      // sexChart.setOption(sexOption);
        const myChart = echarts.init(document.getElementById("echarts5"));
        myChart.setOption(sexOption);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
    },


    // async getTodayOrders() {
    //   const { rows } = await listTodayOrder()
    //   this.todayOrders = rows
    // },
    // async getlistTodayMorning() {
    //   const { rows } = await listTodayMorning()
    //   this.morningData = rows.map((item) => ({ ...item, goods: { image: item.image, name: item.goodsName } }))
    //   if (this.chooseFlag) {
    //     this.tableDataMenu = rows
    //   }
    // },
    // async getlistTodayEvening() {
    //   const { rows } = await listTodayEvening()
    //   this.eveningData = rows
    //   if (!this.chooseFlag) {
    //     this.tableDataMenu = rows.map((item) => ({ ...item, goods: { image: item.image, name: item.goodsName } }))
    //   }
    // },
    // async getresourceAll() {
    //   const { rows } = await latestResource()
    //   this.tableDataAll = rows.map((item) => ({ ...item, amountUnit: item.amount + item.unit }))
    // },
    // async getbalanceToday() {
    //   const { data: { totalAmount, totalCancel, totalOrder, totalPeople } } = await balanceToday()
    //   this.totalAmount = totalAmount
    //   this.totalCancel = totalCancel
    //   this.totalOrder = totalOrder
    //   this.totalPeople = totalPeople
    // },
    // handlerMenu(flag) {
    //   this.chooseFlag = flag;
    //   if (flag) {
    //     this.tableDataMenu = this.morningData
    //   } else {
    //     this.tableDataMenu = this.eveningData
    //   }
    // },
    // initEcharts() {
    //   // 基本柱状图
    //   const option = {
    //     xAxis: {
    //       type: "category",
    //       data: this.xData,
    //     },
    //     legend: {
    //       data: ["消费人数", "消费金额"],
    //       bottom: "0px",
    //     },
    //     yAxis: {},
    //     series: [
    //       {
    //         name: "消费人数",
    //         type: "bar", //形状为柱状图
    //         itemStyle: {
    //           width: "200px",
    //           color: "#0091ff",
    //         },
    //         barWidth: "50%",
    //         data: this.yData,
    //       },
    //       {
    //         // name: "",
    //         name: "消费金额",
    //         type: "line",
    //         smooth: true,
    //         data: [123, 54, 68, 35, 23, 97, 28, 35, 24, 58, 25, 57, 18, 26, 27, 98, 35],
    //         itemStyle: {
    //           color: "yellow",
    //         },
    //       },
    //     ],
    //     grid: {
    //       top: 10,
    //       left: "2%",
    //       right: "2%",
    //       bottom: "10%",
    //       containLabel: true,
    //     },
    //   };
    //   const myChart = echarts.init(document.getElementById("mychart"));
    //   myChart.setOption(option);
    //   //随着屏幕大小调节图表
    //   window.addEventListener("resize", () => {
    //     myChart.resize();
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;

  .container-left {
    width: 50%;

    .consumption {
      display: flex;

      .consumption-item {
        width: 25%;
        display: flex;
        align-items: center;

        .consumption-item-img {
          width: 47px;
          margin-right: 15px;
        }

        .consumption-item-title {
          font-size: 10px;
          color: #746060;
        }

        .consumption-item-number {
          font-size: 20px;
        }
      }
    }

    .container-left-middle {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
    }

    .container-left-buttom {
      margin-top: 10px;
    }
  }

  .container-right {
    margin-left: 10px;
    width: 48%;

    .container-right-card-header {
      float: right;
      display: flex;

      .container-right-card-header-left {
        width: 50px;
        height: 30px;

        // background-color: blue;
        border-radius: 15px 0 0 15px;
        text-align: center;
        line-height: 30px;
        border: 0.5px solid #ccc;
        // color: #fff;
      }

      .container-right-card-header-right {
        width: 50px;
        height: 30px;
        // background-color: blue;
        border-radius: 0 15px 15px 0;
        text-align: center;
        line-height: 30px;
        border: 0.5px solid #ccc;
        // color: #fff;
      }
    }
  }
}

.main {
  display: flex;
  margin-top: 20px;

}

.mains {
  display: flex;
  margin-top: 20px;
  position: relative;
}

.main_left {
  width: 49%;
  margin-left: 20px;

}

.main_right {
  width: 49%;
  margin-left: 20px;
}

#echarts1 {
  width: 100%;
  height: 300px;
}

#echarts2 {
  width: 100%;
  height: 300px;
}

#echarts5 {
  width: 100%;
  height: 300px;
}

#echarts3 {
  width: 100%;
  height: 300px;
}

#echarts4 {
  width: 100%;
  height: 300px;
}

.main_right_search {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main_right_searchA {
  display: flex;
  justify-content: space-between;

}
</style>
